<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link href="https://js.arcgis.com/4.21/esri/themes/light/main.css" rel="stylesheet"/>
    <script src="https://js.arcgis.com/4.21/"></script>
    <script>
        require(["esri/config", "esri/Map", "esri/views/MapView", "esri/portal/Portal", "esri/widgets/BasemapGallery", "esri/widgets/Search", "esri/widgets/Expand"],
            (esriConfig, Map, MapView, Portal, BasemapGallery, Search, Expand)=>{
                esriConfig.portalUrl = "https://jsapi.maps.arcgis.com";

                var portal = new Portal();

                //load()加载此类引用的资源。如果视图是使用地图实例构造的，则此方法会自动为视图及其在Map 中引用的所有资源执行。
                //开发人员在访问不会加载到View 中的资源时必须调用此load()方法。
                portal.load().then(() => {
                    console.log(portal);
                    //获取底图
                    let baseMap = portal.useVectorBasemaps ? portal.defaultVectorBasemap : portal.defaultBasemap;

                    let map = new Map({
                        basemap:baseMap
                    });

                    let view = new MapView({
                        map:map,
                        container:"viewDiv",
                        center: [-118.24, 34.073],
                        scale: 10000
                    });
                    /**
                     * BasemapGallery:地图画廊小部件显示代表来自ArcGIS.com或用户定义的地图或影像服务集的底图的集合影像。
                     * 从 BasemapGallery 中选择新底图时，地图的底图图层将被删除并替换为图库中选择的关联底图的底图图层。
                     * 默认情况下，BasemapGallery 小部件如下图所示。
                     */
                    let basemapGallery = new BasemapGallery({
                        view:view
                    });

                    //创建一个展开的小部件,
                    let expand = new Expand({
                        view:view,
                        content:basemapGallery//要在展开的 Expand 小部件中显示的内容为底图画廊
                    });

                    //添加展开的小部件
                    view.ui.add(expand,"bottom-left");

                    //创建一个搜索小部件
                    var search = new Search({ view: view });

                    //添加搜索小部件
                    view.ui.add(search, "top-right");
                }).catch(function (error) {
                    console.warn(error);
                });
            });
    </script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
